<template>
  <div class="message_review_form">
    <el-row class="top" style="padding:10px;border-bottom:1px solid #D8D8D8">
   
      <el-col :span="5">
        <label>
          昵称：
          <el-input
            style="width:160px"
            v-model="searchForm.nickname"
            clearable
            placeholder="昵称"
          ></el-input>
        </label>
      </el-col>
      <el-col :span="11" style="text-align:center">
        <span v-if="tabOpt.name == 'blacklist'">拉黑时间：</span>
        <span v-else-if="tabOpt.name == 'vip'">加入VIP时间:</span>
        <span v-else>发送时间：</span>
        <el-date-picker
          v-model="searchForm.startData"
          style="width:340px"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="timestamp"
          :default-time="['12:00:00']"
        ></el-date-picker>
      </el-col>
      <el-col :span="6" v-if="tabOpt.type == 1">
        <label>
          发送内容：
          <el-input
            style="width:calc(100% - 100px)"
            v-model="searchForm.text"
            clearable
            placeholder="发送内容"
          ></el-input>
        </label>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" round  icon="el-icon-search" @click="queryData(tabOpt)">查询</el-button>
      </el-col>
    </el-row>
    <el-row style="padding:10px;">
      <el-col :span="22">
        <el-button round
          type="success"
          v-if="tabOpt.name == 'authstr' || tabOpt.name == 'nopass'"
          @click="allowThis(null,SelectionID)"
        >批量上屏</el-button>
        <el-button round
          type="danger"
          v-if="tabOpt.name == 'authstr' || tabOpt.name == 'passed'"
          @click="refuseThis(null,SelectionID)"
        >批量拦截</el-button>
        <el-button round
          type="primary"
          v-if="tabOpt.name == 'vip'"
          @click="removeVip(null,SelectionID)"
        >批量移出VIP</el-button>
        <el-button round
          type="primary"
          v-if="tabOpt.name == 'blacklist'"
          @click="removeVip(null,SelectionID)"
        >批量移出黑名单</el-button>
        
      </el-col>
      <el-col :span="2">
         <!-- <el-button type="text" @click="selectAllSelection">全选</el-button>
        <el-button type="text" @click="toggleAllSelection(tableData)">反选</el-button>
        <el-button type="text" @click="clearSelection">清除</el-button>
        <el-button type="text" @click="clearSelection">导出数据</el-button> -->
        <!-- <el-button size="mini" type="primary" round plain @click="selectAllSelection">全选</el-button>
        <el-button size="mini" type="primary" round plain @click="toggleAllSelection(tableData)">反选</el-button>
        <el-button size="mini" type="danger" round plain @click="clearSelection">清除</el-button> -->
        <el-button size="mini" type="primary" round plain @click="clearSelection">导出数据</el-button>
      </el-col>
    </el-row>
     <div class="chooseBg">
          <el-button type="text" @click="selectAllSelection">全选</el-button>
          <el-button type="text" @click="toggleAllSelection(tableData)">反选</el-button>
      </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      element-loading-text="数据拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.6)"
      :data="tableData"
      :key="tabOpt.name"
      size="medium"
      tooltip-effect="dark"
      style="width: 100%;"
      :stripe="true"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column  width="100" type="selection">
       
      </el-table-column>
      <el-table-column
        v-for="colItem in tabOpt.tableColumn"
        :key="colItem.prop"
        :prop="colItem.prop"
        :label="colItem.label"
        :sortable="colItem.sort"
        :formatter="colItem.formatter"
        :width="colItem.prop === 'headimgurl' ? '60' : ''"
      >
        <template slot-scope="scope">
          <img
            v-if="colItem.prop === 'headimgurl'"
            style="width:40px;height:40px;border-radius:20px"
            :src="scope.row.headimgurl"
            title="头像" />
          <span v-else>{{ scope.column.formatter ? scope.column.formatter(scope.row[colItem.prop]) : scope.row[colItem.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="handler" key="handler" label="操作" width="255">
        <template slot-scope="scope">
          <div>
            <el-tooltip
              v-if="tabOpt.name === 'authstr' || tabOpt.name === 'nopass'"
              class="item"
              effect="dark"
              content="同意"
              placement="bottom"
            >
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="allowThis(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              v-if="tabOpt.name === 'authstr' || tabOpt.name === 'passed'"
              class="item"
              effect="dark"
              content="不同意"
              placement="bottom"
            >
              <el-button
                type="danger"
                circle
                icon="el-icon-close"
                @click="refuseThis(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              v-if="tabOpt.type === 1"
              class="item"
              effect="dark"
              content="加入VIP"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-plus"
                circle
                @click="addVip(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              v-if="tabOpt.type === 1"
              class="item"
              effect="dark"
              content="拉黑"
              placement="bottom"
            >
              <el-button
                type="info"
                circle
                icon="el-icon-s-release"
                @click="addBlack(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-button
              v-if="tabOpt.name === 'vip'"
              type="text"
              @click="removeVip(scope.$index, scope.row)"
            >移出VIP</el-button>
            <el-button
              v-if="tabOpt.name === 'blacklist'"
              type="text"
              @click="removeVip(scope.$index, scope.row)"
            >移出黑名单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="page.totalPage > 1"
      style="text-align:right;margin:20px 0"
      background
      layout="prev, pager, next"
      :page-count="page.totalPage"
      :current-page="page.pageIndex"
      @current-change="currentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
    props: {
        tabOpt: {
            type: Object,
            default: () => {},
        },
        tableData: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: false,
        },
        page: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            sceneid: this.$route.query.sceneId,
            searchForm: {
                nickname: '',
                startData: '',
                text: '',
            },
            SelectionID: [],
            isDisable: false,
        };
    },
    methods: {
        // todo 方法调用修改传参
        // 查询按钮  查询数据
        // 初始查询第一页，传入筛选条件
        queryData(tab) {
            this.$emit('changePage', tab, 1, this.searchForm);
            // type === 1 ? this.$emit('fetchData',this.searchForm) : this.$emit('fetchUser',this.searchForm);
        },
        // 更新用户状态
        updateUserState(index, row, type) {
            var para = {
                sceneid: this.sceneid,
                isvip: type,
            };
            if (Array.isArray(row)) {
                // 批量移除
                if (!row.length) {
                    return;
                }
                para.unionid = row
                    .map(item => {
                        return item.unionid;
                    })
                    .toString();
            } else {
                // 单个移除
                para.unionid = row.unionid;
            }
            this.$api.post(
                '/ftUserInfo/updateVip',
                para,
                res => {
                    if (res.msg === '操作成功') {
                        this.$message.succes('移除成功');
                        this.updateLocal(index)
                    }
                },
                err => {
                    this.$message.error(err);
                }
            );
        },
        // 更新信息状态
        updateMsgState(index, row, type) {
            //  type 0 待审核 1 已上屏  2 未通过
            var para = {
                isaudit: type,
            };
            if (Array.isArray(row)) {
                // 批量操作
                if (!row.length) {
                  this.$message.warning("还没有选中的数据");
                    return;
                }
                para.id = row.map(item => {
                        return item.id;
                    }).toString();
            } else {
                // 单个操作
                para.id = row.id;
            }

            this.$api.post(
                '/ftMessage/updateAudit',
                para,
                res => {
                    this.$message.success(res);
                    this.updateLocal(index,row);
                },
                err => {}
            );
        },
        // 更新本地数据
        updateLocal(index,row){
          if(typeof index === 'number'){  // 单个数据操作，直接删除
              this.tableData.splice(index,1)
          }else{
            // 批量操作
            for (let index = 0; index < row.length; index++) {
              const item = row[index];
              let delIndex = this.tableData.findIndex(v => v.id === item.id);
              if(delIndex !== -1){
                this.tableData.splice(delIndex,1)
              }
            }
          }
        },
        addVip(index, row) {
            this.updateUserState(index, row, 1);
        },
        removeVip(index, row) {
            this.updateUserState(index, row, 0);
        },

        addBlack(index, row) {
            this.updateUserState(index, row, 2);
        },
        allowThis(index, row) {
            this.updateMsgState(index, row, 1);
        },
        refuseThis(index, row) {
            this.updateMsgState(index, row, 2);
        },
        // 全选
        selectAllSelection() {
            this.clearSelection();
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        toggleAllSelection(rows) {
            console.log(rows);
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
        },
        // 清除
        clearSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange(data) {
            this.SelectionID = [];
            data.forEach(item => {
                this.SelectionID.push(item);
            });
        },
        currentChange(page) {
            var main = document.getElementsByClassName("main");
            main[0].scrollTop = 130;
            var tab = this.tabOpt;
            this.$emit('changePage', tab, page);
        },
    },
   
};
</script>

<style lang="scss">
.message_review_form {
  .el-row{
    @include container-bg
  }
  .chooseBg{
      width: 100px;
      height: 40px;
      padding: 0;
      background: url('~@/assets/imgs/icon_bts_bg01.svg') no-repeat;
      background-size: cover;
      background-position: center center;
      position: absolute;
      left: 0;
      top: 108px;
      z-index: 10;

      .el-button--text{
          width: 50%;
          height: 100%;
          padding: 0;
          border: none;
          float: left;
          margin: 0;

          span{
              color: #fff;
              text-decoration: none;
          }
      }
  }
}
</style>